<template>
  <div class="page-container">
    <div class="page-content">
      <div class="container" style="flex-grow: 1;">
        <basic-card :title='$t("project.order")' :icon-class="'el-icon-eleme'">
          <basic-table :pageMethod="$mainApi.orderApi.getOrderByPage" :tableForm="tableForm">
            <template #table-top="basicTable">
              <el-form ref="form" :inline="true" size="small"  class="text-right">
                <el-form-item>
                  <el-input v-model="tableForm.search" @change="basicTable.table.refresh"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="basicTable.table.refresh">{{$t('botton.search')}}</el-button>
                  <el-button type="success" @click="showBrandsFormDialop(null, {})">{{$t('botton.create')}}</el-button>
                  <!--  <el-button
                    type="danger"
                    @click="showDeleteDialop(basicTable.table.selectRows)"
                    :disabled="basicTable.table.selectRows.length < 1"
                  >{{$t('botton.batch_delete')}}</el-button> -->
                </el-form-item>
              </el-form>
            </template>
            <template #table-column>
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="amount" :label="$t('project.amount')"></el-table-column>
              <el-table-column prop="paid_through" :label="$t('project.paid_through')"></el-table-column>
              <el-table-column prop="out_sn" :label="$t('project.out_sn')"></el-table-column>
              <el-table-column prop="status" :label="$t('project.status')"></el-table-column>
              <el-table-column prop="product_detail" :label="$t('project.product_detail')"></el-table-column>
              <el-table-column prop="appointmentd_at" :label="$t('project.appointmentd_at')"></el-table-column>
              <el-table-column prop="paid_at" :label="$t('project.paid_at')"></el-table-column>
              <el-table-column prop="used_at" :label="$t('project.used_at')"></el-table-column>
              <el-table-column prop="created_at" :label="$t('project.created_at')"></el-table-column>
              <el-table-column prop="customer" :label="$t('project.customer')"></el-table-column>
              <el-table-column prop="product" :label="$t('project.product')"></el-table-column>
            </template>
            <template #others-elements="basicTable">
              <brands-form-dialop ref="BrandsFormDialop" @success="basicTable.table.refresh" />
              <!--  <basic-delete-dialop ref="DeleteDialop" @confirm="(list) => deleteData(list, basicTable.table.refresh)" /> -->
            </template>
          </basic-table>
        </basic-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import BrandsFormDialop from "./components/brandsFormDialop.vue";
import BasicDeleteDialop from "@/components/Basic/Dialop/BasicDeleteDialop.vue";
import BasicTable from "@/components/Basic/Table/BasicTable.vue";
import BasicCard from "@/components/Basic/Card/BasicCard.vue";
export default Vue.extend({
  components: { BrandsFormDialop, BasicDeleteDialop , BasicTable, BasicCard},
 data() {
    return {
      tableForm: {
        search: ""
      }
    }
  },
 
  methods: {
    goBack() {
      this.$router.back();
    },
    showBrandsFormDialop(id: any, formData: any) {
      (this.$refs.BrandsFormDialop as any).init(id, formData);
    },
   
  }
})
</script>

<style>

</style>
